<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表库 - 组件演示</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../components/chart/chart.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 openHarmony_Cordova_NutpiDesign</h1>
            <p class="subtitle">组件演示 - 图表库</p>
        </header>

        <nav class="demo-nav">
            <a href="../index.html" class="nav-back">← 返回首页</a>
        </nav>

        <main class="main-content">
            <section class="demo-section">
                <h2>📈 图表库组件演示</h2>
                
                <div class="chart-controls">
                    <div class="chart-type-buttons">
                        <button class="chart-type-btn active" onclick="switchChartType('bar')">柱状图</button>
                        <button class="chart-type-btn" onclick="switchChartType('line')">折线图</button>
                        <button class="chart-type-btn" onclick="switchChartType('pie')">饼图</button>
                    </div>
                </div>

                <div id="chartContainer" class="chart-wrapper"></div>
            </section>

            <section class="demo-section">
                <h2>使用代码</h2>
                <pre><code>// 1. 引入文件
&lt;link rel="stylesheet" href="components/chart/chart.css"&gt;
&lt;script src="components/chart/chart.js"&lt;/script&gt;

// 2. 初始化图表
const chart = new Chart({
    container: '#chartContainer',
    type: 'bar',  // bar, line, pie
    title: '销售数据统计',
    data: [120, 200, 150, 80, 90],
    labels: ['一月', '二月', '三月', '四月', '五月']
});

// 3. 切换图表类型
chart.setType('line');

// 4. 更新数据
chart.setData([100, 150, 200, 120], ['一月', '二月', '三月', '四月']);</code></pre>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 OpenHarmony 三方库适配中心 | MIT License</p>
        </footer>
    </div>

    <script src="../components/chart/chart.js"></script>
    <script>
        let currentChart = null;

        document.addEventListener('DOMContentLoaded', function() {
            initChartDemo();
        });

        function initChartDemo() {
            currentChart = new Chart({
                container: '#chartContainer',
                type: 'bar',
                title: '销售数据统计',
                data: [120, 200, 150, 80, 90, 110],
                labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
                width: 800,
                height: 400
            });
        }

        function switchChartType(type) {
            if (currentChart) {
                currentChart.setType(type);
                
                // 更新按钮状态
                document.querySelectorAll('.chart-type-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                event.target.classList.add('active');
            }
        }
    </script>
</body>
</html>
